<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>DWell CMS</title>

    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/jo-bootstrap.css">
    <link rel="stylesheet" href="static/css/main.css">
    <link rel="stylesheet" href="static/css/table.css">
    <link rel="stylesheet" href="static/css/contentbody.css">
    <link rel="stylesheet" href="static/icomoon/style.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/plugins/jqGrid/ui.jqgrid.css">
    <link rel="stylesheet" href="static/css/jquery-ui.min.css">
    <link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="static/plugins/artDialog/ui-dialog.css">

    <link rel="stylesheet" href="static/css/jo-reset.css">

    <!--<link rel="stylesheet" href="static/plugins/dataTables/css/jquery.dataTables.min.css">-->
    <!--<link rel="stylesheet" href="static/plugins/dataTables/css/dataTables.foundation.min.css">-->
    <!-- 可选的Bootstrap主题文件（一般不用引入）
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .min-dialog {
            border: none;
            padding: 0;
        }
        .min-dialog .ui-dialog-content {
            padding: 0;
            display: block;
        }
        .content-success {
            width: 240px;
            height: 80px;
        }
        .bg-green {
            background-color: #3E9C1A !important;
        }
        .success-info {
            padding: 15px;
            border-bottom: none;
        }
        .success-info p {
            color: #ffffff;
            margin-top: 8px;
        }
        .success-info p span {
            font-size: 26px;
            display: block;
        }
        .success-info i {
            font-size:48px;
            color: #ffffff;
        }
    </style>
</head>
<body class="dashboard fixed skin-blue">
    <div class="wrapper">
        <header class="main-header">
            <a href="" class="logo">
                <span class="logo-lg">
                    <b>Admin</b>LTE
                </span>
            </a>
            <nav class="navbar navbar-static-top" role="navigation">
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">4</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You Have 4 Messages</li>
                                <li>

                                </li>
                            </ul>
                        </li>
                        <li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">10</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 10 notifications</li>
                                <li>

                                </li>
                                <li class="footer"></li>
                            </ul>
                        </li>
                        <li class="dropdown tasks-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 9 tasks</li>
                                <li>

                                </li>
                                <li class="footer"></li>
                            </ul>
                        </li>
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="static/img/avatar.png" class="user-image" alt="User Image"/>
                                <span class="hidden-xs">Jange Gu</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="user-header">header</li>
                                <li class="user-body">
                                    user body
                                </li>
                                <li class="user-footer"></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
    </div><!--  头部布局完毕  -->

    <div class="bottom">
        <div class="body-sidebar">
            <div class="sidebar-content">
                <div class="sidebar-inner">
                    <div class="sidebar-fold"></div>
                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">产品与服务</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-newspaper"></span>
                                    </div>
                                    <span class="menu-item-title">对象存储OSS</span>
                                </a>
                            </li><!--nav-menu-item每个子菜单-->
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-newspaper"></span>
                                    </div>
                                    <span class="menu-item-title">域名</span>
                                </a>
                            </li>
                        </ul>
                    </div><!--sidebar-nav菜单分类Accordion-->

                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">系统管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">用户管理</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">角色管理</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">资源管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">菜品管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">菜品类别</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">菜品上传</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">菜品列表</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">点菜备注</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">退菜备注</span>
                                </a>
                            </li>
                        </ul>
                    </div>


                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">订单管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">订单记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">挂账记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">清账记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">评价管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="sidebar-nav">
                        <div style="padding: 3px;"></div>
                        <div style="color: #FFFFFF; padding: 4px; font-size: 12px;">Copyright @ DWell Smartfd Ver 1.0.0</div>
                        <div style="padding: 10px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-content">
            <div class="content-wrapper" id="products-mgr">
                <div class="content-navbar">

                </div>
                <div class="content-main">
                    <div class="container content-container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div style="padding: 8px 0;">
                                    <div class="content-header">
                                        <ul class="breadcrumb">
                                            <li><i class="fa fa-home"></i><a href="#">Home</a></li>
                                            <li>Dashboard</li>
                                        </ul>
                                    </div>
                                    <div class="content-body-group">
                                        <div class="content-body-group-search">
                                            <form id="queryform" action="" class="form-inline">
                                                <div class="form-group mr-col-10">
                                                    <label class="control-label jo-lbl">
                                                        菜品名称：
                                                    </label>
                                                    <input type="text" class="form-control jo-ipt" />
                                                </div>
                                                <div class="form-group mr-col-10">
                                                    <label class="control-label jo-lbl">
                                                        新增日期：
                                                    </label>
                                                    <input type="text" class="form-control jo-ipt" />
                                                    <span style="margin: 0 4px;">至</span>
                                                    <input type="text" class="form-control jo-ipt" />
                                                </div>
                                                <div class="form-group mr-col-10">
                                                    <button class="btn btn-search col-wh-60">搜索</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="content-body-group-toolbar clearfix">
                                            <button class="jo-btn jo-btn-del pull-left mr-col-10"></button>
                                            <button class="jo-btn jo-btn-shelf-up pull-left mr-col-10"></button>
                                            <button class="jo-btn jo-btn-shelf-down pull-left mr-col-10"></button>
                                            <button class="btn btn-primary" onclick="messageTip();">消息提示</button>
                                            <button class="btn btn-primary" onclick="messageTip2();">消息提示2</button>
                                        </div>
                                        <div class="content-body-group-table">
                                            asdasdasd
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-success success-info bg-green" id="tip-success">
        <i class="fa fa-check-circle"></i>
        <p class="pull-right"><span>SUCCESS !</span></p>
    </div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
<script src="static/js/jquery-2.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/plugins/artDialog/dialog-min.js"></script>
<script src="static/plugins/artDialog/dialog-plus-min.js"></script>
<script type="text/javascript">
    var table;
    $(function(){
        /**
         * 可以通过设置高度，用animate的方式，更加平滑的切换查看效果
         */
        $('.sidebar-nav .sub-menus-toggle').click( function(e){
            e.preventDefault();
            $li = $(this).parent('.sidebar-nav');
            if( !$li.hasClass('nav-fold')){
                console.log($li.find("span.toggle-icon"));
                $li.find(".toggle-icon").removeClass('fa-angle-down').addClass('fa-angle-left');
                $li.addClass('nav-fold');
            }
            else {
                $li.find("span.toggle-icon").removeClass('fa-angle-left').addClass('fa-angle-down');
                $li.removeClass('nav-fold');
            }
            $li.find(' > .nav-sub-menus').toggle();
        });

        $(".jo-btn-del").click(function(){
            var d = dialog({
                title: '信息确认',
                content: '删除菜品后将无法恢复，确定删除吗？',
                okValue: '确定',
                ok: function() {

                },
                cancelValue: '取消',
                cancel: function() {}
            });
            d.showModal();
        });
    });

    function messageTip() {
        var elem = document.getElementById("tip-success");
        console.log(elem);
        var d = dialog({
            title: '',
            content: elem,
            padding: 0,
            fixed: true,
            skin: 'min-dialog tips'
        });
        d.show();
//        setTimeout(function () {
//            d.close().remove();
//        }, 1500);
    }

    function messageTip2() {
        var d = dialog({
            content: '新增成功'
        });
        d.width(200).show();
    }
</script>
</body>
</html>
